<template>
	<div class="bind_container">
		<!-- 绑定资金密码 -->
		<nut-form label-position="top" :rules="rules" ref="routineRef" :model-value="bindFormData">
			<nut-form-item :label="t('input_label_password')" prop="new_password">
				<nut-input
					v-model="bindFormData.new_password"
					:placeholder="t('home_page_password_fund_tips1')"
					type="number"
					clearable
					maxlength="8"
					pattern="\d{1,8}"
					 @input="validateInput"
					:class="[eyeOpen1 ? '' : 'text-security']"
					autocomplete="new-password"
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen1 = !eyeOpen1"
							:color="eyeOpen1 ? '#A8A8CA' : '#504F6F'"
							:icon-id="eyeOpen1 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
			<nut-form-item :label="t('input_label_confirm_password')" prop="new_password_confirm">
				<nut-input
					v-model="bindFormData.new_password_confirm"
					:placeholder="t('home_page_password_fund_again')"
					type="number"
					clearable
					 @input="validateInput"
					:class="[eyeOpen2 ? '' : 'text-security']"
					maxlength="8"
					pattern="\d{1,8}"
					autocomplete="new-password"
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen2 = !eyeOpen2"
							:color="eyeOpen2 ? '#A8A8CA' : '#504F6F'"
							:icon-id="eyeOpen2 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
		</nut-form>
		<div class="submit_wrap">
			<nut-button class="submit" @click="submit">{{ t('btn_label_submit') }}</nut-button>
		</div>
		<Toast v-model:visible="showToast">{{ toast_value }}</Toast>
	</div>
</template>
<script setup lang="ts">
import PKwebsocket from '@/lolo/Ws';
import { NetPacket } from '@/netBase/NetPacket';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { WithdrawValidator, againWithdrawValidator } from '../validator';
import { ref, defineAsyncComponent, onUnmounted, onMounted } from 'vue';
import { User } from '@/store/user';
import pinia from '@/store/index';
import { useRouter } from 'vue-router';
import { updateStorePayPwd } from '@/utils/useStoreMethods';
const Toast = defineAsyncComponent(() => import('@/components/Toast.vue'));
const { t } = useI18n();
const showToast = ref(false);
const toast_value = ref('');
const routineRef = ref();
const eyeOpen1 = ref(false);
const eyeOpen2 = ref(false);
const userInfo = User(pinia);
const router = useRouter();
const { roleInfo } = storeToRefs(userInfo);
const bindFormData: any = ref({
	new_password: '',
	new_password_confirm: '',
});

const rules = {
	new_password: [{ validator: WithdrawValidator }],
	new_password_confirm: [
		{
			validator: (val: any) => {
				return againWithdrawValidator(val, bindFormData.value.new_password);
			},
		},
	],
};

const submit = () => {
	routineRef.value?.validate().then(({ valid, errors }: any) => {
		if (valid) {
			let req = NetPacket.req_bind_or_modify_withdraw_password();
			req.operate_type = 1;
			req.old_password = '';
			req.new_password = bindFormData.value.new_password;
			req.role_id = Number(roleInfo.value?.id);
			req.step = Number(roleInfo.value?.id);
			req.new_password_confirm = bindFormData.value.new_password_confirm;
			PKwebsocket.instance.send(req, true, {
				callbackName: 'msg_notify_bind_or_modify_withdraw_password',
				callback: notify_withdraw_result,
			});
		} else {
			console.warn('error:', errors);
		}
	});
};

// 限制只能输入输入数字
const validateInput = () => {
  bindFormData.value.new_password = bindFormData.value.new_password.replace(/[^0-9]/g, '').slice(0, 8);
	bindFormData.value.new_password_confirm = bindFormData.value.new_password_confirm.replace(/[^0-9]/g, '').slice(0, 8);
}

// 资金密码修改回执
const notify_withdraw_result = (rs: any) => {
	if (rs.code == 1) {
		bindFormData.value.new_password && updateStorePayPwd(bindFormData.value.new_password);

		showToast.value = true;
		toast_value.value = t('operation_success');
		setTimeout(() => {
			router.push('/securitySettings');
		}, 2000);
	} else {
		showToast.value = true;
		toast_value.value = t(rs.message);
	}
};

onUnmounted(() => {
	// bindFormData.value.new_password = ''
	// bindFormData.value.new_password_confirm = ''
});
onMounted(() => {
	setTimeout(() => {
		bindFormData.value.new_password = '';
		bindFormData.value.new_password_confirm = '';
	}, 800);
});
</script>
<style lang="scss" scoped>
@import url(../style.scss);

.submit_wrap {
	bottom: 50px !important;
	left: 0 !important;
}
.text-security {
	-webkit-text-security: disc;
	text-security: disc;
}
</style>
